<template>
	<view class="addEditForm">
		<gui-back v-if="optionDisabled"></gui-back>
		<view class="data-form bgfff">
			<view class="title-view" style="padding-bottom: 15rpx;">
				<!-- 居中标题 -->
				<view class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-align-items-center">
					<text class="gui-color-gray gui-icons small-text">&#xe69b;</text>
					<text class="gui-primary-color gui-h6 title1-margin gui-title-text">{{dataObj.title}}</text>
					<text class="gui-color-gray gui-icons small-text">&#xe69b;</text>
				</view>
			</view>
			<view class="problem-list" v-for="(item,index) in questions" :key="item.id">
				<view class="typeTitle">{{tipNum[index]}}、{{item.title}}</view>
				<view class="item" v-for="(item2,index2) in item.questions" :key="item2.id">
					<view class="title flex">
						<text>{{index2+1}}、{{item2.problem}}？</text>
						<view class="status cfff"
							:style="{'background':getType(item2.topicType,'color')}">
							{{getType(item2.topicType,'text')}}</view>
					</view>
					<view class="options-m flex-ac-wrap">
						<view class="options-item" v-for="(item3,index3) in item2.options" :key="item3.id">
							<text>{{item3.option}}.</text>
							<text>{{item3.content}}</text>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		<gui-totop :top="pageScrollTop" bottom="200rpx" borderRadius="50%"></gui-totop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				did: '',
				dataObj:{},
				questions:[],
				optionDisabled: false,
				pageScrollTop: 0, //滚动到顶部
				scrollTimer: null, //定时器返回顶部
				tipNum:['一','二','三']
			}
		},
		onPageScroll(e) { //页面滚动事件
			if (this.scrollTimer != null) {
				clearTimeout(this.scrollTime);
			}
			this.scrollTimer = setTimeout(() => {
				this.pageScrollTop = e.scrollTop;
			}, 0);
		},
		onLoad(options) {
			console.log('options', options);
			this.did = options.id || ''
			this.optionDisabled = options.op == 'look' ? true : false
			// let title = options.op == 'look' ? '详情' : options.op == 'add' ? '新增' : '编辑'
			// uni.setNavigationBarTitle({
			// 	title
			// })
			if(this.did) {
				this.loadDetail()
			}
		},
		methods: {
			loadDetail() {
				this.$http.get(`/training/paper/${this.did}`).then(res => {
					if (res.code == 200) {
						console.log('res',res);
						let result = res.data
						this.dataObj = result
						this.questions = result.questions_map
						console.log('this.questions',this.questions);
					}
				})
			},
			getType(status, type) {
				//退款的流程 1.申请退款 2.已同意退款 3.退货中 4.已退货 5.已完成 6.拒绝
				let textStatus = ''
				let color = ''
				switch (status) {
					case 'Single':
						textStatus = '单选'
						color = '#32CD32'
						break;
					case 'Multi':
						textStatus = '多选'
						color = '#2979ff'
						break;
					case 'Judge':
						textStatus = '判断'
						color = '#FF0000'
						break;
					default:
						break;
				}
				return type == 'text' ? textStatus : color
			},
			
		}
	}
</script>

<style lang="less">
.problem-list{
	padding: 25rpx 0;
	.typeTitle{
		padding-left: 25rpx;
		margin-bottom: 30rpx;
	}
	.item{
		padding: 0 30rpx 0 40rpx;
		.title{
			margin-bottom: 5rpx;
			.status {
				padding: 4rpx 14rpx;
				border-radius: 20rpx 0 20rpx 0;
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}
		.options-m{
			padding: 20rpx 0 0 30rpx;
			.options-item{
				width: 50%;
				margin-bottom: 20rpx;
			}
		}
	}
}	

</style>